/* 颜色变量 */

/* 行为相关颜色 */
$main-color-primary: #007aff;
$main-color-success: #4cd964;
$main-color-warning: #f0ad4e;
$main-color-error: #dd524d;

/* 主题相关颜色 */
$main-color-theme: #FBD904;

// 辅色一
$main-color-auxiliary-one:#FFFFFF;
// 辅色二
$main-color-auxiliary-two:#1998FF;
// 辅色三
$main-color-auxiliary-three:#00C486;
// 辅色四
$main-color-auxiliary-four:#FFC600;
// 辅色四
$main-color-auxiliary-five:#ff0000;

/* 文字基本颜色 */
$main-text-color:#333;//基本色
$main-text-color-inverse:#fff;//反色
$main-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$main-text-color-placeholder: #808080;
$main-text-color-disable:#c0c0c0;
$main-text-color-base:#ffffff;

/* 背景颜色 */
$main-bg-color:#F8F9FA;
$main-bg-color-grey:#f8f8f8; //辅助灰色
$main-bg-color-hover:#f1f1f1;//点击状态颜色
$main-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
$main-bg-color-white:#ffffff;

/* 边框颜色 */
$main-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$main-font-size-sm:12px;
$main-font-size-base:14px;
$main-font-size-lg:16px;
$main-font-size-lgm:18px;


/* 图片尺寸 */
$main-img-size-sm:20px;
$main-img-size-base:26px;
$main-img-size-lg:40px;

/* Border Radius */
$main-border-radius-sm: 4px;
$main-border-radius-base: 6px;
$main-border-radius-lg: 12px;
$main-border-radius-circle: 50%;

/* 水平间距 */
$main-spacing-row-sm: 5px;
$main-spacing-row-base: 10px;
$main-spacing-row-lg: 15px;

/* 垂直间距 */
$main-spacing-col-sm: 4px;
$main-spacing-col-base: 8px;
$main-spacing-col-lg: 12px;

/* 透明度 */
$main-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$main-color-title: #2C405A; // 文章标题颜色
$main-font-size-title:20px;
$main-color-subtitle: #555555; // 二级标题颜色
$main-font-size-subtitle:26px;
$main-color-paragraph: #3F536E; // 文章段落颜色
$main-font-size-paragraph:15px;

/* theme.scss */
@import 'uview-ui/theme.scss';

.font-size-sm{
	font-size:$main-font-size-sm;
}
.font-bold{
	font-weight: bold;
}

.icon-size{
	width: 50rpx;
	height: 50rpx;
}

.icon-img-size{
	width: 104rpx;
	height: 104rpx;
}

.icon-img-32{
	width: 64rpx;
	height: 64rpx;
}

.icon-img-24{
	width: 48rpx;
	height: 48rpx;
}

.icon-img-50{
	width: 100rpx;
	height: 100rpx;
}

.icon-img-64{
	width: 128rpx;
	height: 128rpx;
}

.icon-img-20{
	width: 40rpx;
	height: 40rpx;
}


.icon-attention-color{
	color: #515BD4 !important;
}

.icon-help-color{
	color: #8134AF !important;
}

.icon-material-color{
	color: #DD2A7B !important;
}

.icon-feedback-color{
	color: #F07810 !important;
}

.icon-shipping_address-color{
	color: #5BE7C4 !important;
}

.icon-updates-color{
	color: #50C1E9 !important;
}

.icon-quit-color{
	color: #FD5F00 !important;;
}

.flex-1{
	flex: 1;
}

.bg-color{
	background-color: $main-bg-color;
}
page{
	background-color: $main-bg-color;
}

// 定义内外边距，历遍1-100
@for $i from 0 through 100 {
	// 只要双数和能被5除尽的数
	@if $i % 2 == 0 or $i % 5 == 0 {
		// 得出：u-margin-30或者u-m-30
		.u-margin-#{$i},
		.u-m-#{$i} {
			margin: $i + rpx !important;
		}
		.u-m-x-#{$i} {
			margin-left: $i + rpx !important;
			margin-right: $i + rpx !important;
		}
		.u-m-y-#{$i} {
			margin-top: $i + rpx !important;
			margin-bottom: $i + rpx !important;
		}

		// 得出：u-padding-30或者u-p-30
		.u-padding-#{$i},
		.u-p-#{$i} {
			padding: $i + rpx !important;
		}
		.u-p-x-#{$i} {
			padding-left: $i + rpx !important;
			padding-right: $i + rpx !important;
		}
		.u-p-y-#{$i} {
			padding-top: $i + rpx !important;
			padding-bottom: $i + rpx !important;
		}

		@each $short, $long in l left, t top, r right, b bottom {
			// 缩写版，结果如： u-m-l-30
			// 定义外边距
			.u-m-#{$short}-#{$i} {
				margin-#{$long}: $i + rpx !important;
			}

			// 定义内边距
			.u-p-#{$short}-#{$i} {
				padding-#{$long}: $i + rpx !important;
			}

			// 完整版，结果如：u-margin-left-30
			// 定义外边距
			.u-margin-#{$long}-#{$i} {
				margin-#{$long}: $i + rpx !important;
			}

			// 定义内边距
			.u-padding-#{$long}-#{$i} {
				padding-#{$long}: $i + rpx !important;
			}
		}
	}
}
/**
* 弹性盒三段式布局
*/
.page_box {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-x: hidden;
	background: $u-bg-color;
}
.scroll-box {
	flex: 1;
	height: 100%;
	position: relative;
}
.content_box {
	flex: 1;
	overflow-y: auto;
}


.dating-page-main-scroll {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	//height:calc(100vh - var(--window-top));//calc()是动态计算函数
}
.dating-page-main-list{
	//background-color: $main-color-auxiliary-one;
	padding:0 20rpx;
}

.dating-img-full{
	width: 100%;
	height: 100%;
}

.dating-img-radius-32{
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
}

.dating-img-radius-62{
	width: 124rpx;
	height: 124rpx;
	border-radius: 50%;
}

.dating-img-radius-48{
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}


.dating-img-12{
	width: 24rpx;
	height: 24rpx;
}

.dating-img-18{
	width: 36rpx;
	height: 36rpx;
}


.dating-img-24{
	width: 48rpx;
	height: 48rpx;
}

.dating-img-32{
	width: 64rpx;
	height: 64rpx;
}

.dating-img-48{
	width: 96rpx;
	height: 96rpx;
}

.dating-img-62{
	width: 124rpx;
	height: 124rpx;
}

.dating-bt-x-10{
	padding: 0 20rpx;
}


.dating-list-wrap{
	background-color: $main-color-auxiliary-one;
	padding: 0 20rpx;
	.dating-list-item-bottom{
		border-bottom: 2rpx solid $main-text-color-inverse;
	}
	.dating-list-item{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.dating-list-item-left{
			
		}
		.dating-list-item-right{
			
		}
	}
}

.dating-sex-boys{
	background-color: #515BD4;
	width: 80rpx;
	height: 40rpx;
	border-radius: 25rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: $main-color-auxiliary-one;
}
.dating-sex-girl{
	background-color: #F2317F;
	width: 80rpx;
	height: 40rpx;
	border-radius: 25rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: $main-color-auxiliary-one;
}

.dating-level-wrap{
	text-align: center;
	background-color: #3c9cff;
	color: #fff;
	width:60rpx;
	border-radius: 50rpx;
}
.row-y{
	display: flex;
	flex-direction: column;
}
.row-x{
	display: flex;
}
.row-sta-bet{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.row-end{
	display: flex;
	align-items: flex-end;
}
.row-cen{
	display: flex;
	align-items: center;
}
.row-sta{
	display: flex;
	align-items: flex-start;
}
.row-cen-end{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.row-cen-sta{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.row-cen-cen{
	display: flex;
	align-items: center;
	justify-content: center;
}
.row-cen-end{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.row-cen-bet{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.col-cen{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.col-cen-bet{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.col-cen-cen{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.col-cen-end{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.block-cen{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.def-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.def-img>image {
	width: 100%;
	height: 100%;
}

.title {
  position: relative;
  padding-left: 13px;
}

.title:before {
  content: "";
  background-color: $main-color-theme;
  width: 4px;
  height: 14px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.split-line-box{
	width: 2rpx;
	background: #d9d9d9;
	height: 50rpx;
}

.main-text-color-base{
	color:$main-text-color-base;
}